let chart = null;
const data = [{ hour: '20:00', temp: 38 },
{ hour: '18:00', temp: 52 }];

function initChart(canvas, width, height, F2) { // 使用 F2 绘制图表
  //实例化图表
  chart = new F2.Chart({
    el: canvas,
    width,
    height
  });
  //装载数据   
  // 配置纵坐标temp项的样式
  chart.axis('temp', {
    label: {
      fill: '#FFFFFF',
    }
  });
  // 配置纵坐标temp项的样式
  chart.axis('temp', {
    label: {
      fill: '#FFFFFF',
    }
  });
  // 配置横坐标hour项的样式
  chart.axis('hour', {
    tickLine: {
      length: 4,
      stroke: '#FFFFFF'
    },
    label: {
      fill: '#FFFFFF'
    }
  });
  chart.source(data, {
    temp: {
      tickCount: 3,
      //后面添加温度 °C
      formatter: function (val) {
        return val + '°C';
      },
    },
    hour: {
      tickCount: 5 //间隔显示
    }
  });
  // 配置提示信息
  chart.tooltip({
    showItemMarker: false,
    showCrosshairs: true,
    background: {
      radius: 2,
      padding: [3, 5],
      fill: '#16A05D'
    },
    nameStyle: {
      fill: '#fff'
    },
  });
  //画图-柱状图、折线图、饼图...   
  chart.line().position('hour*temp');
  // 给每个温度添加一个圆点
  chart.point().position('hour*temp').style({
    stroke: '#eee',
    lineWidth: 1,
    fillOpacity: 0.7
    // fill:'#eee'
  });// 重新定义图形语法
  //   
  chart.render();
  return chart;
}
Page({
  data: {
    //默认地址
    city: '北京',
    location: '116.41,39.92',
    // 和风天气key
    myKey: 'a70e794a1ab0476782569a15b7150b37',
    // 实时天气
    nowWeather: {},
    // 今天的日出日落
    toDaySunrise: {},
    // 三天天气
    threeWeather: [],
    // 15天天气
    weather15: [],
    // 15天天气时间简写
    weather15Times: [],
    // 图表
    opts: {
      onInit: initChart
    },
    // 设置三张天气情况的背景图
    backgroundImg: 'https://z3.ax1x.com/2021/11/04/IeZmGt.png'
  },
  onLoad(options) {
    //加载中提示开始
    wx.showLoading({
      title: '努力加载中...请稍后',
    })
    //0.6秒后页面提示关闭
    setTimeout(function () {
      wx.hideLoading()
    }, 1500)
    console.log(options)
    console.log(options.location)
    // 获取当前的经纬度
    if (options.location != undefined) {
      this.setData({
        location: options.location
      })
      // 调用获取实时天气、城市名、三天预报、15天 24小时
      this.getNowWeather()
      this.getCityName()
      this.getThreeWeather()
      this.getWeather15()
      this.get24Weather()
    } else {
      wx.getLocation({
        altitude: 'altitude',
        success: res => {
          // console.log(res)
          //获取当前的经纬度，拼接赋值给location
          this.setData({
            location: res.longitude + ',' + res.latitude
          })
          // 调用获取实时天气、城市名、三天预报、15天、24小时
          this.getNowWeather()
          this.getCityName()
          this.getThreeWeather()
          this.getWeather15()
          this.get24Weather()
        }
      })
    }

  },
  //获取和风天气实时天气
  getNowWeather: function () {
    wx.request({
      url: `https://devapi.qweather.com/v7/weather/now?location=${this.data.location}&key=${this.data.myKey}`,
      success: res => {
        // 定义一个临时变量存储背景图片的url 默认晴天
        let bckImg = 'https://z3.ax1x.com/2021/11/04/IeZmGt.png'
        if (res.data.now.text == '多云' || res.data.now.text == '阴') {
          bckImg = 'https://z3.ax1x.com/2021/11/03/IkvRdH.png'
        } else if (res.data.now.text == '晴') {
          bckImg = 'https://z3.ax1x.com/2021/11/04/IeZmGt.png'
        } else if (res.data.now.text == '小雨' || res.data.now.text == '雷阵雨' || res.data.now.text == '阵雨' || res.data.now.text == '阵雪' || res.data.now.text == '小雪') {
          bckImg = 'https://z3.ax1x.com/2021/11/04/IeZdMT.png'
        }
        this.setData({
          nowWeather: res.data.now,
          backgroundImg: bckImg
        })
      }
    })
  },
  // 获取城市信息
  getCityName: function () {
    wx.request({
      url: `https://geoapi.qweather.com/v2/city/lookup?location=${this.data.location}&key=${this.data.myKey}`,
      success: res => {
        // console.log(res)
        this.setData({
          city: res.data.location[0].adm2
        })
      }
    })
  },
  // 获取24小时预报
  get24Weather: function () {
    wx.request({
      url: `https://devapi.qweather.com/v7/weather/24h?location=${this.data.location}&key=${this.data.myKey}`,
      success: res => {
        console.log(res.data.hourly)
        const arr = []
        // 去掉时间前后字符串 临时变量
        let times = []
        for (let j = 0; j < res.data.hourly.length; j++) {
          times.push(res.data.hourly[j].fxTime.slice(11, res.data.hourly[j].fxTime.length - 6))
        }
        for (let i = 0; i < res.data.hourly.length; i++) {
          arr.push({ hour: times[i], temp: parseInt(res.data.hourly[i].temp) })
        }
        setTimeout(function () {
          chart.changeData(arr)
        }, 100)
      }
    })
  },
  // 获取三天预报
  getThreeWeather: function () {
    wx.request({
      url: `https://devapi.qweather.com/v7/weather/3d?location=${this.data.location}&key=${this.data.myKey}`,
      success: res => {
        // console.log(res.data.daily)
        this.setData({
          //今天日出日落
          toDaySunrise: res.data.daily[0],
          //三天
          threeWeather: res.data.daily
        })
      }
    })
  },
  // 获取15天预报
  getWeather15: function () {
    wx.request({
      url: `https://devapi.qweather.com/v7/weather/15d?location=${this.data.location}&key=${this.data.myKey}`,
      success: res => {
        // console.log(res.data.daily)
        //定义一个临时存储时间的变量； 然后使用slice去掉前面的字符串。再push到临时变量里面
        let timeArr = []
        for (let i = 0; i < res.data.daily.length; i++) {
          timeArr.push(res.data.daily[i].fxDate.slice(5))
        }
        // console.log(timeArr)
        this.setData({
          weather15: res.data.daily,
          weather15Times: timeArr
        })
      }
    })
  },
  // 点击跳转到搜索页面
  toSearch: function () {
    wx.redirectTo({
      url: '/pages/search/search',
    })
  },
  // 点击跳转生活指数
  toLifeIndex: function () {
    wx.navigateTo({
      url: '/pages/lifeIndex/lifeIndex?location=' + this.data.location,
    })
  },

  onPullDownRefresh:function(){
    wx.showNavigationBarLoading()
    setTimeout(function()
    {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    },1000);
    this.getNowWeather()
    this.getCityName()
    this.getThreeWeather()
    this.getWeather15()
    this.get24Weather()
    }
})
